<template>
  <div class="box">
    <h1>专题精选</h1>
    <van-swipe
      class="my-swipe"
      indicator-color="white"
      @change="onChange"
      :show-indicators="false"
      :width="300"
    >
      <van-swipe-item
        v-for="(item, index) in data"
        :key="index"
        class="minBox"
        @click="fn"
      >
        <img :src="item.scene_pic_url" alt="" />
        <p class="p1">
          {{ item.title }}
        </p>
        <p class="p2">
          {{ item.subtitle }}
        </p>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "topicList",
  props: ["data"],
  methods: {
    fn(){
      this.$router.push({name:"Topic"})
    },
    onChange() {
      console.log(123);
    },
  },
  mounted() {
    console.log(this.data);
  },
};
</script>

<style scoped lang="less">
.box {
  height: 400px;
  //   background: blueviolet;
  h1 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 15px;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: white;
  .p1 {
    width: 100%;
    text-align: left;
    font-size: 14px;
    display: block;
    height: 40px;
    color: black;
    box-sizing: border-box;
    padding-left: 10px;
    line-height: 40px;
  }
  .p2 {
    width: 100%;
    text-align: left;
    font-size: 15px;
    display: block;
    height: 40px;
    color: black;
    box-sizing: border-box;
    padding-left: 10px;
    line-height: 40px;
    margin-top: -10px;
  }
  img {
    width: 90%;
    height: 208.33px;
    // margin-left: -25%;
    // transform: scaleX(1.2);
  }
}
</style>
